<template>
  <div class="table-box">
    <div class="card table-search">
      <el-form ref="formRef" :model="searchParam">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="在线状态：">
              <el-select v-model="searchParam.state_list" @change="search">
                <el-option v-for="(item, index) of statusData" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号分组：">
              <el-select v-model="searchParam.group_list" @change="search">
                <el-option v-for="(item, index) of accountData" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号类别：">
              <el-select v-model="searchParam.type_list" @change="search">
                <el-option v-for="(item, index) of accountType" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号排序方式：">
              <el-select v-model="searchParam.sort_type" @change="search">
                <el-option v-for="(item, index) of sortType" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="card table-main">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="accountState" label="在线状态" align="center" />
        <el-table-column prop="accountName" label="账号昵称" align="center" />
        <el-table-column prop="phoneGroup" label="组别名称" align="center" />
        <el-table-column prop="phoneName" label="所在云手机名称" align="center" />
        <el-table-column prop="mmId" label="微信id" align="center" />
        <el-table-column prop="videoCount" label="视频个数" align="center" />
        <el-table-column prop="videoMinute" label="视频时间" align="center" />
        <el-table-column prop="lookCount" label="文章篇数" align="center" />
        <el-table-column prop="lookMinute" label="文章时间" align="center" />
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        v-model:current-page="query.page"
        v-model:page-size="query.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="browseStatistics">
import { ref } from "vue";
import {
  getAccountGroupsApi,
  getAccountListApi,
  getAccountSortTypesApi,
  getAccountStatesApi,
  getAccountTypesApi
} from "@/api/modules/business";
import { AccountList } from "@/api/interface";

const formRef = ref<any>();
const searchParam = ref({
  state_list: "全部",
  group_list: "全部",
  type_list: "全部",
  sort_type: "默认"
});
const statusData = ref<{ name: string }[]>([]);
const accountData = ref<{ name: string }[]>([]);
const accountType = ref<{ name: string }[]>([]);
const sortType = ref<{ name: string }[]>([]);
const tableData = ref<AccountList[]>([]);
const total = ref(10);
const query = ref({ page: 1, size: 10 });

function search() {
  console.log(searchParam.value);
  query.value.page = 1;
  getAccountData();
}

async function getAccountTypes() {
  const data = await getAccountTypesApi();
  accountType.value = data.typeList.map(item => {
    return { name: item };
  });
}

async function getAccountGroups() {
  const data = await getAccountGroupsApi();
  accountData.value = data.groupList.map(item => {
    return { name: item };
  });
}

async function getAccountStates() {
  const data = await getAccountStatesApi();
  statusData.value = data.stateList.map(item => {
    return { name: item };
  });
}

async function getAccountSortTypes() {
  const data = await getAccountSortTypesApi();
  sortType.value = data.sortList.map(item => {
    return { name: item };
  });
}

async function getAccountData() {
  const data = await getAccountListApi({
    ...query.value,
    with_messages: true,
    ...searchParam.value
  });
  tableData.value = data.data || [];
  total.value = data.total || 0;
}

function handleSizeChange(num: number) {
  query.value.page = 1;
  query.value.size = num;
  getAccountData();
}

function handleCurrentChange(num: number) {
  query.value.page = num;
  getAccountData();
}

getAccountTypes();
getAccountGroups();
getAccountStates();
getAccountData();
getAccountSortTypes();
</script>
